<template>
  <view class="points-box">
    <view class="power-info">
      <view class="todo">
        <image class="diamond-icon" :src="diamond_img" mode="widthFix" />
        还差 {{ luckyMax - progress }} 幸运值 获得幸运宝箱
      </view>
      <view class="fire" v-if="progress == 100">
        <image
          class="fire-img fire-1"
          mode="heightFix"
          :src="
            $IMG_URL + '/uploads/20230427/7a9b20335374cc17dc999cb515fbcd36.gif'
          "
        />
        <image
          class="fire-img fire-2"
          mode="heightFix"
          :src="
            $IMG_URL + '/uploads/20230427/acd8b09daa6f207f30c32d3ede840351.gif'
          "
        />
      </view>
      <view class="progress" :class="progress == luckyMax ? 'max' : ''">
        <view
          class="progress-bar"
          :class="progress == luckyMax ? 'max' : ''"
          :style="progressWidth"
        ></view>
      </view>
      <view class="numeric"> 幸运值 {{ value }} / {{ luckyMax }} </view>
    </view>

    <view class="box-border" @tap="fetchBox" hover-class="hover-bubble">
      <view class="box" :class="number > 0 ? 'max' : ''">
        <image class="conic" :src="conic_img" />
        <view class="btn-cell">
          <view class="box-icon-group">
            <slot name="box"></slot>
          </view>

          <view class="receive-btn" :class="number > 0 ? 'can' : ''">
            <image
              class="none-icon"
              hover-class="hover-bubble"
              mode="widthFix"
              :src="treasureChestsStatus[number > 0 ? 1 : 0]"
              alt=""
            />
            <view class="text"> 领取宝箱 </view>
          </view>
        </view>
      </view>
      <!-- -->
      <view class="r-tag" v-if="number > 0">
        {{ number > 99 ? '99' : number }}
      </view>
    </view>
  </view>
</template>
<script>
/**
 * 幸运箱
 * @property {String|Number} 幸运值
 * @method fetchBox 领取宝箱
 *
 */
// 图片
import box_img from '../img/box.png';
import diamond_img from '../img/diamond.png';
import conic_img from '../img/conic-0.png';

import none_icon from '../img/none-icon.png';
import has_0 from '../img/has-0.png';
///////
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  props: {
    value: {
      type: [String, Number],
      default: 0,
    },
  },
  data() {
    return {
      // 图片
      box_img,
      diamond_img,
      conic_img,
      ///////
      treasureChestsStatus: [none_icon, has_0],
      // 最大幸运值
      luckyMax: 100,
      open: false,
      // 火开启
      showFire: false,
    };
  },
  // 计算属性 适配者模式
  computed: {
    number() {
      return this.value >= this.luckyMax
        ? parseInt(this.value / this.luckyMax)
        : 0;
    },

    progress() {
      let num = 0;
      // if (this.value > this.luckyMax) {
      //   num =
      //     this.value - this.luckyMax * this.number == 0
      //       ? 100
      //       : this.value - this.luckyMax * this.number;
      // } else {
      //   num = this.value;
      // }

      // return num;
      return this.value >= this.luckyMax ? 100 : this.value;
    },
    progressWidth() {
      return ` width: calc( 100% * ${this.progress * 0.01})`;
      // return ` width: calc( 100% * ${1})`;
    },
  },
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   * 在实例初始化之前被调用
   */
  beforeCreate() {},
  // 在实例创建完成后被立即调用
  created() {},
  // 在挂载开始之前被调用
  beforeMount() {},
  // 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用nextTick
  mounted() {},
  // 数据更新时调用，发生在虚拟 DOM 打补丁之前
  beforeUpdate() {},
  // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  updated() {},
  // 实例销毁之前调用。在这一步，实例仍然完全可用
  beforeDestroy() {},
  // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  destroyed() {},
  methods: {
    // 获取幸运箱子
    fetchBox() {
      // this.open = true;
      if (this.number == 0 || this.value < this.luckyMax) return;
      this.$emit('fetch', { type: true });
    },
  },
};
</script>
<style lang="scss" scoped>
view,
image {
  max-width: none;
}
.points-box {
  display: flex;
  justify-content: space-between;
  align-items: center;

  --long: 126rpx;
  /* 箱子 参数 */
  --box-ratio: 0.2;
  --box-i-w: 2500rpx;
  --box-w: 500rpx;
  --box-h: 500rpx;
  --box-poi: absolute;
  --box-r: 0rpx;
  --box-b: 30rpx;
  /* 箱子 参数 end */
  animation: fade 1s linear 0s 1 normal none;

  .power-info {
    position: relative;
    flex-shrink: 0;
    width: 470rpx;

    .fire {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 97rpx;

      .fire-img.fire-1 {
        z-index: 1;
        animation: fade 1s ease-in 0s 1 normal none;
      }
      .fire-img.fire-2 {
        opacity: 0;
        animation: fade 0.6s linear 0.5s 1 normal forwards;
      }
      .fire-img {
        position: absolute;
        bottom: 0;
        left: 51%;
        transform: translateX(-50%);
        height: 120rpx;
        width: 100%;
        opacity: 0;
      }
    }

    .todo {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      margin-bottom: 12rpx;
      height: 46rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #ffffff;
    }
    .progress.max {
      border: 2rpx solid #ffd778;
      background: rgba(255, 121, 1, 1);
    }
    .progress {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      padding: 2rpx 2rpx;
      transition: all 1s;
      overflow: hidden;
      width: 100%;
      height: 30rpx;
      background: #391b96;
      border-radius: 22rpx 22rpx 22rpx 22rpx;
      border: 2rpx solid rgba(122, 87, 207, 1);
      box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);

      .progress-bar.max {
        background-color: #fe3201;
        background-image: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.15) 25%,
          transparent 25%,
          transparent 50%,
          rgba(255, 255, 255, 0.15) 50%,
          rgba(255, 255, 255, 0.15) 75%,
          transparent 75%,
          transparent
        );
        border: 2rpx solid #ffd778;
        animation: progress-bar-stripes 0.5s linear 0s infinite normal none,
          fade 0.3s linear 0s 1 normal none;
      }
      .progress-bar {
        width: 0rpx;
        height: 22rpx;
        background-color: #0780e6;
        transition: all 1s;
        background-image: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.15) 25%,
          transparent 25%,
          transparent 50%,
          rgba(255, 255, 255, 0.15) 50%,
          rgba(255, 255, 255, 0.15) 75%,
          transparent 75%,
          transparent
        );
        background-size: 44rpx 44rpx;
        border-radius: 22rpx 22rpx 22rpx 22rpx;
        border: 2rpx solid rgba(77, 219, 255, 1);
        box-shadow: 0 3rpx 6rpx 6rpx rgba(255, 255, 255, 0.4) inset;
        animation: progress-bar-stripes 2s linear 0s infinite normal none;
      }
    }
    .numeric {
      margin-top: 6rpx;
      padding-left: 10rpx;
      font-size: 22rpx;
      color: #ffffff;
    }
    .diamond-icon {
      margin-right: 6rpx;
      width: 46rpx;
      height: 46rpx;
    }
  }
  .box-border {
    position: relative;
    width: var(--long);
    height: var(--long);
    .r-tag {
      display: flex;
      justify-content: center;
      align-content: center;
      align-items: center;
      position: absolute;
      right: -15rpx;
      top: -15rpx;
      z-index: 6;
      padding: 2rpx 4rpx;
      min-width: 36rpx;
      min-height: 36rpx;
      border-radius: 50%;
      background: #fb6497;
      border: 2rpx solid #ffffff;
      color: #fff;
      font-size: 20rpx;
      animation: scale-up-ver-bottom 0.5s linear 0s 1 normal none;
    }
  }

  .mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100075;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
  }

  .box.max {
    background-color: #25b3f1;
    .conic {
      animation: route-1 6s linear 0s infinite normal none;
    }
  }
  .box {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 10rpx;
    border: 3rpx solid rgba(185, 234, 252, 1);
    background-color: #b9b9b9;

    overflow: hidden;

    .conic {
      --n: 1.2;
      position: absolute;
      top: calc(50% - (var(--long) * var(--n)) / 2);
      left: calc(50% - (var(--long) * var(--n)) / 2);
      width: calc(var(--long) * var(--n));
      height: calc(var(--long) * var(--n));
    }
    .btn-cell {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      position: relative;
      z-index: 2;
      width: 100%;
      height: 100%;

      .box-icon-group.open {
        --box-poi: fixed;
        --box-b: 30%;
        --box-r: 60rpx;
        z-index: 100076;
      }
      .box-icon-group {
        position: var(--box-poi);
        bottom: var(--box-b);
        right: var(--box-r);

        flex-shrink: 0;
        transition: all 0.6s;
        width: calc(var(--box-w) * var(--box-ratio));
        height: calc(var(--box-h) * var(--box-ratio));
        // overflow: hidden;
      }
      .box-icon {
        width: calc(var(--box-i-w) * var(--box-ratio));
        height: 100%;
      }
      .receive-btn.can {
        animation: rubberband-horizontal 0.5s linear 0s 1 normal none;
      }
      .receive-btn {
        flex-shrink: 0;
        position: relative;
        width: 100%;
        height: 37rpx;

        .none-icon {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          // height: 100%;
        }
        .text {
          position: relative;
          z-index: 1;
          width: 100%;
          height: 100%;
          font-size: 21rpx;
          font-weight: bold;
          color: #ffffff;
          line-height: 37rpx;
          text-align: center;
        }
      }
    }
  }
}

@keyframes progress-bar-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 44rpx 0;
  }
}
@keyframes route-1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rubberband-horizontal {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes scale-up-ver-bottom {
  0% {
    transform: scale(0.4);
    transform-origin: 0% 100%;
  }
  100% {
    transform: scale(1);
    transform-origin: 0% 100%;
  }
}
</style>
